
import React from 'react';
import {Icon, Popconfirm, Modal, Input, Form, Button} from 'antd';
const FormItem = Form.Item;
import ModalForm from '../../components/Modal';
//自定义组件
import Table from '../../components/Table';

export default class Menu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalKey: '',//设置随机key销毁modal,
            visible: false,
            isAdd:true,
            addMenu: {},
            isSecond: true,
            modalName: '默认'

        }
    }
    //添加
    addMenu = (record) => {
        this.props.openModal();
        if (record) {

            this.setState({
                visible: true,
                isSecond: true,
                isAdd:true,
                modalName: '添加子菜单',
                addMenu: Object.assign({}, this.state.addMenu, {
                    parentid: record.SysID
                })
            });

        } else {

            this.setState({
                visible: true,
                isSecond: false,
                isAdd:true,
                modalName: '添加一级菜单'
            })

        }
    };

    //更新菜单
    updateMenu = (record) => {

        if (record.parentid!==''&&record.parentid!==null) {

            this.setState({
                visible: true,
                isSecond: true,
                isAdd:false,
                modalName: '编辑子菜单',
                addMenu: Object.assign({}, this.state.addMenu,record)
            });

        } else {

            this.setState({
                visible: true,
                isSecond: false,
                isAdd:false,
                modalName: '编辑一级菜单',
                addMenu: Object.assign({}, this.state.addMenu,record)
            })

        }

    };

    deleteMenu = (id) => {
        this.props.deleteMenu(id);
    };


    handleOk = () => {
        if(this.state.isAdd){
            this.props.addMenu(this.state.addMenu);
        }else{
            this.props.updateMenu(this.state.addMenu);
        }

        this.handleCancel();

    };

    handleCancel = () => {

        this.setState({
            visible: false,
            addMenu: {}
        })

    };

    changeVal = (e) => {

        switch (e.target.name) {

            case 'title':

                this.setState({
                    addMenu: Object.assign({}, this.state.addMenu, {
                        title: e.target.value
                    })
                });

                break;

            case 'link':

                this.setState({
                    addMenu: Object.assign({}, this.state.addMenu, {
                        link: e.target.value
                    })
                });

                break;

            case 'idx':

                this.setState({
                    addMenu: Object.assign({}, this.state.addMenu, {
                        idx: e.target.value
                    })
                });
                break;

            case 'icon':

                this.setState({
                    addMenu: Object.assign({}, this.state.addMenu, {
                        icon: e.target.value
                    })
                });

                break;

            default:

                this.setState({
                    addMenu: Object.assign({}, this.state.addMenu, {
                        qx: e.target.value
                    })
                })

        }

    };


    componentWillMount() {

        this.props.onFetch();

    }


    render() {

        const columns = [
            {
                title: '名称',
                dataIndex: 'title',
                key: 'title',
                width: '20%',
                render: (text, record) => {

                    return <span>{record.idx} : {text}</span>

                }
            }, {
                title: '路由',
                dataIndex: 'link',
                key: 'link',
                width: '20%',
                render: (text, record) => {

                    if (!record.parentid) {

                        return (

                            <span style={{color: '#b0b0b0'}}>
                                <Icon type="close-square-o"/>
                                <span style={{marginLeft: '10px'}}>一级菜单没有路由</span>
                            </span>

                        )

                    }

                    return <span>{text}</span>

                }
            },
            {
                title: '图标名称',
                dataIndex: 'icon',
                key: 'icon',
                width: '20%',
                render: (text, record) => {

                    if (record.parentid) {

                        return (

                            <span style={{color: '#b0b0b0'}}>
                                <Icon type="close-square-o"/>
                                <span style={{marginLeft: '10px'}}>二级菜单没有图标</span>
                            </span>

                        )

                    }

                    return <span>{text}</span>

                }
            },
            {
                title: '权限',
                dataIndex: 'qx',
                key: 'qx',
                width: '20%',
                render: (text, record) => {

                    if (!record.parentid) {

                        if (text === 1) {

                            return <span>管理员</span>

                        }

                        return <span>全部</span>

                    }

                    return (

                        <span style={{color: '#b0b0b0'}}>
                            <Icon type="close-square-o"/>
                            <span style={{marginLeft: '10px'}}>二级菜单权限同一级</span>
                        </span>

                    )

                }
            },
            {
                title: '操作',
                key: 'action',
                width: '20%',
                render: (text, record) => {

                    return (

                        <span>

                            <Popconfirm title="确定要删除此菜单吗?" onConfirm={() => this.deleteMenu(record.SysID)} okText="确定" cancelText="取消">
                                <a href="#">删除</a>
                            </Popconfirm>

                            <span className="ant-divider"/>

                            <a onClick={() => this.updateMenu(record)}>修改</a>

                            {!record.parentid &&

                            <span>
                                                <span className="ant-divider"/>
                                                <a onClick={() => this.addMenu(record)}>添加子菜单</a>
                                            </span>

                            }

                        </span>

                    )
                }
            }
        ];
        const ModalData={
            fields: {
                username:{
                    value: 'benjycui',
                },
                password:{
                    value:'123'
                }
            },
            info:[{
                labelName:'姓名',
                id:'username',
                message:'请输入用户名'
            },{
                labelName:'密码',
                id:'password',
                message:'请输入密码'
            }],

        };
        return (

            <div>

                <Button type="primary" style={{marginBottom: '15px'}} onClick={() => this.addMenu(false)}>添加一级菜单</Button>
                {/*<Modal*/}
                    {/*title={this.state.modalName}*/}
                    {/*visible={this.state.visible}*/}
                    {/*onOk={this.handleOk}*/}
                    {/*onCancel={this.handleCancel}*/}
                {/*>*/}
                    {/*<Form>*/}

                        {/*<FormItem*/}
                            {/*label="名称"*/}
                            {/*hasFeedback*/}
                            {/*labelCol={{span: 4}}*/}
                            {/*wrapperCol={{span: 12}}*/}
                        {/*>*/}

                            {/*<Input value={this.state.addMenu.title} onChange={this.changeVal} name="title"/>*/}

                        {/*</FormItem>*/}

                        {/*{*/}

                            {/*this.state.isSecond &&*/}

                            {/*<FormItem*/}
                                {/*label="路由"*/}
                                {/*hasFeedback*/}
                                {/*labelCol={{span: 4}}*/}
                                {/*wrapperCol={{span: 12}}*/}
                            {/*>*/}

                                {/*<Input value={this.state.addMenu.link} onChange={this.changeVal} name="link"/>*/}

                            {/*</FormItem>*/}

                        {/*}*/}

                        {/*<FormItem*/}
                            {/*label="序号"*/}
                            {/*hasFeedback*/}
                            {/*labelCol={{span: 4}}*/}
                            {/*wrapperCol={{span: 12}}*/}
                        {/*>*/}

                            {/*<Input type="number" value={this.state.addMenu.idx} onChange={this.changeVal} name="idx"/>*/}

                        {/*</FormItem>*/}

                        {/*{*/}

                            {/*!this.state.isSecond &&*/}

                            {/*<div>*/}

                                {/*<FormItem*/}
                                    {/*label="权限"*/}
                                    {/*hasFeedback*/}
                                    {/*labelCol={{span: 4}}*/}
                                    {/*wrapperCol={{span: 12}}*/}
                                {/*>*/}

                                    {/*<Input type="number" value={this.state.addMenu.qx} onChange={this.changeVal} name="qx"/>*/}

                                {/*</FormItem>*/}

                                {/*<FormItem*/}
                                    {/*label="图标"*/}
                                    {/*hasFeedback*/}
                                    {/*labelCol={{span: 4}}*/}
                                    {/*wrapperCol={{span: 12}}*/}
                                {/*>*/}

                                    {/*<Input value={this.state.addMenu.icon} onChange={this.changeVal} name="icon"/>*/}

                                {/*</FormItem>*/}

                            {/*</div>*/}

                        {/*}*/}

                    {/*</Form>*/}
                {/*</Modal>*/}
                <Modal
                    title={this.state.modalName}
                    visible={this.props.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <ModalForm {...ModalData} />
                </Modal>

                <Table data={this.props.sideMenu} columns={columns} pagination={false} loading={this.props.tableLoading}/>

            </div>

        )

    }

}
